<template>
  <div class="target-error-questions">
    <Selector
      v-model:classId="classId"
      v-model:selectTime="selectTime"
      v-model:compareValue="compareValue"
      v-model:current-tab="currentTab"
      v-model:currentGradeNum="currentGradeNum"
      v-model:currentGradeId="currentGradeId"
      @changeSubject="changeSubject"
      class="selector-comp"
    />
    <div class="container">
      <LeftContainer
        v-model:current-tab="currentTab"
        v-model:studentList="studentList"
        v-model:checkedStudent="checkedStudent"
        v-model:knowledgePointList="knowledgePointList"
      />
      <RightContainer
        v-model:current-tab="currentTab"
        v-model:checkedStudent="checkedStudent"
        v-model:knowledgePointList="knowledgePointList"
        :classId
        :selectTime
        :compareValue
        :curSubjectId
        :currentGradeNum
      />
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

import { useAuthStore } from '@/stores'
import { storeToRefs } from 'pinia'

import Selector from '@/components/Selector.vue'
import LeftContainer from './components/LeftContainer.vue'
import RightContainer from './components/RightContainer.vue'
import { postStudentByClassId } from '@/apis/common'

const route = useRoute()

const {
  classId,
  currentGradeNum,
  selectedTime: selectTime,
  currentGradeId
} = storeToRefs(useAuthStore())
const currentTab = ref(2)
const compareValue = ref()
const studentList = ref([])

const curSubjectId = ref(0)
const changeSubject = val => {
  curSubjectId.value = val
  console.log(val)
}

// 选中的学生列表
const checkedStudent = ref([])

// 知识点列表
const knowledgePointList = ref([])

watch(
  classId,
  async () => {
    const res = await postStudentByClassId({
      class_id: classId.value
    })
    console.log(res.data)
    studentList.value = res.data
  },
  { immediate: true }
)
const initData = () => {
  if (route.query?.currentTab) {
    currentTab.value = Number(route.query?.currentTab)
  }
}
initData()
</script>
<style lang="less" scoped>
.target-error-questions {
  position: relative;
  .container {
    display: flex;
    width: 100%;
    height: 90vh;
    gap: 20px;
  }

  .selector-comp {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-45px);
  }
}
</style>
